<template>
<div class="page-container">
    <div class="common-content">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
            <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
                <el-form-item label="：">
                    <el-input v-model="searchFilters.id" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="单据编号：">
                    <el-input v-model="searchFilters.code" placeholder="请输入单据编号"></el-input>
                </el-form-item>
                <el-form-item label="关联商品Id：">
                    <el-input v-model="searchFilters.productId" placeholder="请输入关联商品Id"></el-input>
                </el-form-item>
                <el-form-item label="订单编号：">
                    <el-input v-model="searchFilters.orderId" placeholder="请输入订单编号"></el-input>
                </el-form-item>
                <el-form-item label="操作的台账Id：">
                    <el-input v-model="searchFilters.balanceId" placeholder="请输入操作的台账Id"></el-input>
                </el-form-item>
                <el-form-item label="操作编码：">
                    <el-input v-model="searchFilters.operateId" placeholder="请输入操作编码"></el-input>
                </el-form-item>
                <el-form-item label="操作描述：">
                    <el-input v-model="searchFilters.operateDesc" placeholder="请输入操作描述"></el-input>
                </el-form-item>
                <el-form-item label="申请增减的数量;：">
                    <el-input v-model="searchFilters.applyNum" placeholder="请输入申请增减的数量;"></el-input>
                </el-form-item>
                <el-form-item label="实际增减的数量：">
                    <el-input v-model="searchFilters.actualNum" placeholder="请输入实际增减的数量"></el-input>
                </el-form-item>
                <el-form-item label="操作类型(正号为加,负号为减;)：">
                    <el-input v-model="searchFilters.caculateType" placeholder="请输入操作类型(正号为加,负号为减;)"></el-input>
                </el-form-item>
                <el-form-item label="创建时间：">
                    <el-input v-model="searchFilters.createTime" placeholder="请输入创建时间"></el-input>
                </el-form-item>

                <el-form-item label="创建人：">
                    <el-input v-model="searchFilters.creator" placeholder="请输入创建人"></el-input>
                </el-form-item>
                <el-form-item label="修改人：">
                    <el-input v-model="searchFilters.updater" placeholder="请输入修改人"></el-input>
                </el-form-item>
                <el-form-item label="删除标志：">
                    <el-input v-model="searchFilters.deleteFlag" placeholder="请输入删除标志"></el-input>
                </el-form-item>
                <el-form-item label="状态(0-待处理;1-已完成)：">
                    <el-input v-model="searchFilters.status" placeholder="请输入状态(0-待处理;1-已完成)"></el-input>
                </el-form-item>
                <el-form-item label="批次号：">
                    <el-input v-model="searchFilters.batchNo" placeholder="请输入批次号"></el-input>
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input v-model="searchFilters.remark" placeholder="请输入备注"></el-input>
                </el-form-item>
                <el-form-item label="台账类别;1-表示实体仓台账;2-表示虚拟仓台账;：">
                    <el-input v-model="searchFilters.type" placeholder="请输入台账类别;1-表示实体仓台账;2-表示虚拟仓台账;"></el-input>
                </el-form-item>
                <!-- 搜索区域按钮-查询,重置 -->
                <div class="tool-wrap">
                    <div class="left-area">
                        <el-button-group>
                            <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                            <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                            <el-button type="primary" size="small" @click="addForm()">新增</el-button>
                        </el-button-group>
                    </div>
                </div>
                <!-- 表格数据部分 -->
                <div class="table-wrap">
                    <jic-table :height="350" :operationWidth=200 :tableList="tableList" :tableHeaderList="tableHeaderList" :totalSize="totalSize" :showDetailOperation=true :showEditOperation=true :showBatchDelete=false :showSelection=false :showIndex=false @findPage="findPage" @handleDetail="handleDetail" @handleEdit="handleEdit" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange" ref="jicTable"></jic-table>
                </div>
            </el-form>
        </div>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';
import {
    exportExcel
} from "@/utils/excel";

//二.数据输出区
export default {

    //2.1 注册组件
    components: {
        jicTable,
    },

    //2.2 数据初始化区
    data() {
        return {

            //2.2.1 公共数据初始化
            pageIndex: 0,
            pageSize: 10,
            totalSize: 0, //// 返回数据总条数
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [], // 表格列表数据
            searchSize: 'mini',

            // 2.2.2 表格表头数据
            tableHeaderList: [{
                    prop: "id",
                    label: "",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "code",
                    label: "单据编号",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productId",
                    label: "关联商品Id",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "orderId",
                    label: "订单编号",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "balanceId",
                    label: "操作的台账Id",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "operateId",
                    label: "操作编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "operateDesc",
                    label: "操作描述",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "applyNum",
                    label: "申请增减的数量;",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "actualNum",
                    label: "实际增减的数量",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "caculateType",
                    label: "操作类型(正号为加,负号为减;)",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "createTime",
                    label: "创建时间",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "updateTime",
                    label: "",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "creator",
                    label: "创建人",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "updater",
                    label: "修改人",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "deleteFlag",
                    label: "删除标志",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "status",
                    label: "状态(0-待处理;1-已完成)",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "batchNo",
                    label: "批次号",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "remark",
                    label: "备注",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "type",
                    label: "台账类别;1-表示实体仓台账;2-表示虚拟仓台账;",
                    minWidth: 100,
                    formatter: null
                },
            ], // 2.2.3 搜索表单对应的数据对象初始化
            searchFilters: {
                id: null,
                code: null,
                productId: null,
                orderId: null,
                balanceId: null,
                operateId: null,
                operateDesc: null,
                applyNum: null,
                actualNum: null,
                caculateType: null,
                createTime: null,
                updateTime: null,
                creator: null,
                updater: null,
                deleteFlag: null,
                status: null,
                batchNo: null,
                remark: null,
                type: null,
            },
            //dialogVisible: false, //// 是否显示弹窗内容;
            //editDialogVisible1: false,//// 是否可编辑弹窗内容;
            //editLoading: false,////是否显示加载时动画效果;
        } //return 完结;
    }, //data()方法 完结;

    //2.3 JavaScript 方法区
    methods: {
        //2.3.1 JavaScript 公共方法区

        //2.请求列表数据
        findPage(pageNum) {
            // 传过滤器的参数
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {};
            }

            this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            this.utils.request.findMStoreOperatePage(this_.searchFilters, function (res) {
                if (res.code === "0000") {
                    this_.tableList = res.data.rows;
                    this_.totalSize = Number(res.data.total);
                } else {
                    this_.tableList = [];
                    this_.totalSize = 0;
                }
            });
        },

        // 3.重置搜索框条件
        resetForm(formName) {
            this.searchFilters = {};
            this.findPage(null);
        },

        // 4.详情按钮对应的方法(TODO 需要修改路径)
        handleDetail(params) {
            this.$router.push({
                path: "/getMStoreOperateDetail/" + params.row.id
            });
        },

        // 4.详情按钮对应的方法(TODO 需要修改路径)
        handleEdit(params) {
            this.$router.push({
                path: "/getMStoreOperateDetail/" + params.row.id
            });
        },

        addForm(params) {
            params = null;
            this.$router.push({
                path: "/getMStoreOperateDetail/" + params
            });
        },
        // 5.请求条数发生变化
        handleSizeChange(params) {
            this.pageRequest.pageSize = params.size;
        },

        // 6.请求页数发生变化
        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },
        // 7.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },

        // 8.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },

        //==========2.3.1 JavaScript 自定义方法区==========

    },
    //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
        this.findPage();
    },

}
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-form-item__content {
            height: 32px;
            line-height: 32px;
            width: 150px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}
</style>
